<template>
  <div class="progress-card">
    <div class="progress-section">
      <ProgressInfo
        :title="examStore.examInfo.type1 == 1 ? '历年真题' : examStore.examInfo.type1 == 2 ? '还原真题' : ''"
        :completed="countData.num_me"
        :total="countData.num"
      />
      <div class="rightEcharts">
        <EachartsBox :chartOptions="pieData[0]" />
        <div class="chart-value">我的</div>
      </div>
    </div>

    <div class="progress-section">
      <ProgressInfo
        title="正确率"
        :completed="countData.correct_me"
        :total="countData.correct"
      />
      <div class="rightEcharts">
        <EachartsBox :chartOptions="pieData[1]" />
        <div class="chart-value">我的</div>
      </div>
    </div>

    <div class="progress-section">
      <ProgressInfo
        title="平均用时"
        :completed="countData.time_me"
        :total="countData.time"
      />
      <div class="rightEcharts">
        <EachartsBox :chartOptions="pieData[2]" />
        <div class="chart-value">
          {{ countData.time_me - countData.time < 0 ? "领先" : "落后" }}全站
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getQuestionCount } from "@/service/exam";
import { useExam } from "@/stores/exam.js";
import { handlePath } from '@/utils/index.js'
const examStore = useExam();
import { useRoute, useRouter } from "vue-router";
const route = useRoute();

const countData = ref({});
const pieData = ref(
  Array.from({ length: 3 }, () => ({
    series: [
      {
        type: "gauge",
        center: ["50%", "40%"],
        progress: {
          show: true,
          width: 8,
          roundCap: true,
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#82C8DD", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#126983", // 100% 处的颜色
                },
              ],
            },
          },
        },
        detail: {
          formatter: "{value}%",
          fontSize: 12,
          color: "#333333",
          offsetCenter: [0, "0%"],
        },
        pointer: false,
        axisLine: {
          lineStyle: {
            width: 6,
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        // detail: {
        //   show: false,
        //   // offsetCenter:[0,'-15%']
        // },
        data: [
          {
            value: 0,
          },
        ],
      },
    ],
  }))
);

const getQuestionCountFn = async () => {
  const data = {
    subject: handlePath(route.name),
    type1: examStore.examInfo.type1,
  };
  const res = await getQuestionCount(data);
  if (res.code == "000000") {
    countData.value = res.data;
    pieData.value[0].series[0].data[0].value =
      ((res.data.num_me / res.data.num) * 100).toFixed(0) || 0;
    pieData.value[1].series[0].data[0].value = res.data.correct_me;
    pieData.value[2].series[0].data[0].value = (
      Math.abs((res.data.time_me - res.data.time) / res.data.time || 1) * 100
    ).toFixed(0);
  }
};

watch(
  () => examStore.examInfo.type1,
  () => {
    getQuestionCountFn();
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.progress-card {
  padding: 10px;
  // margin-bottom: 10px;
  display: flex;
  padding: 20px;
  justify-content: space-between;
  // gap:20px;
  background-color: #f0fafc;

  .progress-section {
    flex: 1;
    height: 88px;
    width: 196px;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    .rightEcharts {
      flex: 1;
      position: relative;

      .chart-value {
        position: absolute;
        bottom: 11px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        color: #333333;
      }
    }
  }
}
</style>
